import RegisterForm from '../components/RegisterForm'
import { motion } from 'framer-motion'
import { useNavigate } from 'react-router-dom'

const RegisterPage = () => {
  const navigate = useNavigate();
  
  const handleRegisterSuccess = () => {
    // 注册成功后重定向到登录页面
    navigate('/login');
  }

  return (
    <motion.div 
      className="min-h-screen w-full flex flex-col"
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 0.8 }}
    >
      {/* 顶部装饰条 */}
      <div className="h-1 w-full bg-gradient-to-r from-primary to-primary-dark"></div>
      
      <div className="flex justify-center items-center flex-1 p-4 md:p-8">
        <motion.div
          initial={{ y: 50, opacity: 0 }}
          animate={{ y: 0, opacity: 1 }}
          transition={{ duration: 0.8, delay: 0.2, ease: "easeOut" }}
        >
          <RegisterForm onRegisterSuccess={handleRegisterSuccess} />
        </motion.div>
      </div>
      
      {/* 底部信息 */}
      <motion.footer
        className="p-4 text-center text-sm text-gray-500 dark:text-gray-400"
        initial={{ y: 20, opacity: 0 }}
        animate={{ y: 0, opacity: 1 }}
        transition={{ duration: 0.5, delay: 1 }}
      >
        © {new Date().getFullYear()} Demo Application. All rights reserved.
      </motion.footer>
    </motion.div>
  )
}

export default RegisterPage;